<template>
	<view>
		<view class="">
			<u-navbar title="确认订单" bgColor="transparent" :fixed="false" autoBack>
			</u-navbar>
		</view>
		<view class="shopdetail">
			<view class="flex-jus">
				<view class="flex">
					<image src="../static/images/dianpu.png" style="width: 32rpx;height: 32rpx;"></image>
					<text class="f24 ml20">{{detail.oneStore.storeName}}</text>
				</view>
				<view class="flex">
					<text class="f24 c999">{{detail.goodsStores.length}}家门店通用</text>
					<image class="ml20" src="../static/images/icon2.png" mode="widthFix" style="width: 28rpx;">
					</image>
				</view>
			</view>
			<view class="flex-jus flex-start mt20 borderbtm pb20">
				<image :src="api_host+detail.icon" style="width: 150rpx;height: 150rpx;border-radius: 23rpx;"></image>
				<text class="textoverflow2 f32 fw500 ml10 flex1">{{detail.goodName}}</text>
			</view>
			<view class="flex-jus mt20">
				<view class="f24" style="position: relative;width: 70%;">
					<text class="mr10 heidian" v-for="(item,index) in detail.employVal" :key="index">{{item}}</text>
					<p>{{detail.goodNotice}}</p>
				</view>
				<view class="flex" @click="open_xvzhi">
					<text class="f24 c999">购买须知</text>
					<image class="ml20" src="../static/images/icon2.png" mode="widthFix" style="width: 28rpx;">
					</image>
				</view>
			</view>
		</view>
		<!-- 酒店入住日期 -->
		<view class="buyNumber flex-jus" v-if="detail.roomType === 1">
			<text class="f32 fw500">选择入住日期</text>
			<view class="flex-jus">
				<date-picker
					ref="datePickerWrap"
					:show="false" 
					
					:daysCount="daysCount"
					:startDate="paramsRoomData.roomDate"
					@change="handleChangeCheckInDate"
				></date-picker> 
			</view>
		</view>
		
		<view class="buyNumber flex-jus" v-if="detail.roomType === 0">
			<text class="f32 fw500">购买份数</text>
			<view style="width: 260rpx;" class="flex-jus">
				<view @click="reduceBtn">
					<image src="../static/images/reduce.png" style="width: 24rpx;height: 24rpx;"></image>
				</view>
				<text>{{buyNum}}</text>
				<view @click="addBtn">
					<image src="../static/images/add.png" style="width: 24rpx;height: 24rpx;"></image>
				</view>
			</view>
		</view>
		<view class="youhui">
			<view class="f32 fw500 mt20">本单可享</view>
			<view class="flex-jus mt20">
				<text>团购优惠</text>
				<text class="cff7">- ￥{{ totalDiscountPrice | toFixed2}}</text>
			</view>
			<!-- <view class="flex-jus mt20">
				<text>秒杀价</text>
				<text class="cff7">- ￥0</text>
			</view> -->
			<view class="flex-jus mt20">
				<text>优惠券</text>
				<view class="flex c999" @click="openshowyhq">
					<text v-if="couponList.length > 0"
						class="c343 f26 mr10">{{sel_Coupon.id?(sel_Coupon.coupTitle + '-' + coupon_amount + '元'):'有待使用优惠券'}}</text>
					<text v-else>暂无可用</text>
					<image class="ml20" src="../static/images/icon2.png" mode="widthFix" style="width: 28rpx;">
					</image>
				</view>
			</view>
		</view>
		<view class="buyNumber flex-jus">
			<view class="flex">
				<text class="f32 fw500">支付方式</text>
			</view>
			<view class="flex">
				<image src="../../static/images/order/wx.png" mode="" style="width: 40rpx;height: 40rpx;">
				</image>
				<text class="f28 ml10">微信支付</text>
			</view>
		</view>
		<view class="userinfo_box" v-if="detail.isDue === 1">
			<p class="f32 fw500">预订人信息</p>
			<u--form labelPosition="left" labelWidth="auto" :model="model1" :rules="rules" ref="uForm">
				<u-form-item label="姓名" prop="dueName" borderBottom ref="item1">
					<u--input inputAlign="right" v-model="model1.dueName" border="none"
						placeholder="请输入预订人姓名"></u--input>
				</u-form-item>
				<u-form-item label="手机号" prop="duePhone" ref="item1">
					<u--input inputAlign="right" v-model="model1.duePhone" border="none"
						placeholder="请输入手机号"></u--input>
				</u-form-item>
			</u--form>
		</view>
		<!-- <view class="yonghuxvzhi">
			<view class="">
				<u-checkbox-group v-model="checked">
					<u-checkbox shape="circle" size="14" activeColor="#FFDE6D" labelSize="12"
						label="同意第三方商家获取您的个人信息为您提供服务,并同意" :name="true">
					</u-checkbox>
				</u-checkbox-group>
				<text class="f24 blue ml20" @click="nologinJump('/subpage/news/detail?code=12')">《个人信息获取与保护声明》、</text>
				<text class="f24 blue" @click="nologinJump('/subpage/news/detail?code=5')">《“东楚畅通”服务协议》</text>
			</view>
		</view> -->

		<view class="bottomfixed fix-bot">
			<view>
				<view>
					<span class="cff7 f32">￥</span>
					<text class="cff7 f54 fw500" v-if="sel_Coupon.id">{{total_amount}}</text>
					<text class="cff7 f54 fw500" v-else>{{totalPrice}}</text>
					<span class="oldprice ml10">￥{{totaloriginalPrice}}</span>
				</view>
				<view>
					<text class="f24 cff7">共{{buyNum}}{{ countUnit }} | 优惠￥{{ discountTotalPrice | toFixed2}}</text>
					<text class="f24 c999 ml30" @click="showDetail">明细</text>
				</view>
			</view>
			<view class="buyBtn flex-cen ml20" @click="toSureorder">
				<text>提交订单</text>
			</view>
		</view>

		<!-- 购买须知 -->
		<u-popup :show="show_xvzhi" @close="close_xvzhi" @open="show_xvzhi = true" closeable round="20"
			bgColor="#F7F7F7">
			<view class="p30">
				<view class="f28 c343 bold">购买须知</view>
				<u-gap height="20"></u-gap>
				<view class="goumaixvzhi">
					<view style="display: flex;" class="mt20" v-for="(item,index) in detail.buyNotices" :key="index">
						<image :src="api_host + item.icon" style="width:32rpx;height: 32rpx;"></image>
						<view class="ml20">
							<p class="f28 fw500">{{item.title}}</p>
							<p class="f26 mt10" v-for="(item2,index2) in item.contents" :key="index2">{{item2.content}}
							</p>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 明细 -->
		<u-popup :show="show_fees" @close="closeshowfess" @open="show_fees = true" closeable round="20"
			bgColor="#F7F7F7">
			<view class="p30">
				<view class="f28 c343 bold">费用说明</view>
				<u-gap height="20"></u-gap>
				<view class="contentbox">
					<view class="flex-jus f28 fw500">
						<text class="">商品总价</text>
						<text>￥{{ originalTotalPrice | toFixed2 }}</text>
					</view>
					<view class="flex-jus f26 mt20 borderbtm pb20">
						<text>参考价</text>
						<!-- <text v-if="detail.roomType === 0">{{ buyNum }}{{ countUnit2 }} x ￥{{ referencePrice }}</text> -->
						<text v-if="detail.roomType === 0">{{ buyNum }}{{ countUnit2 }} x ￥{{ detail.originalPrice }}</text>
						<view v-if="detail.roomType === 1">
							<text v-for="item in referenceList" :key="item.date" class="fee-item">{{ item.count }}{{ countUnit2 }} x ￥{{item.originalPrice}}</text>
						</view>
					</view>
					<view class="flex-jus f28 fw500 mt20">
						<text class="">优惠</text>
						<text class="cff7">-￥{{ discountTotalPrice | toFixed2}}</text>
						<!-- <text class="cff7"
							v-else>-￥{{((detail.originalPrice-detail.salePrice)*buyNum) | toFixed2}}</text> -->
					</view>
					<view class="flex-jus f26 mt20">
						<text>团购优惠</text>
						<!-- <text class="cff7">{{buyNum}}{{ countUnit2 }} x ￥{{(detail.originalPrice-detail.salePrice) | toFixed2}}</text> -->
						<text class="cff7">-￥{{ totalDiscountPrice | toFixed2}}</text>
					</view>
					<view class="flex-jus f26 mt20" v-if="detail.goodsSeckill">
						<text>秒杀价优惠</text>
						<text class="cff7">-￥{{ goodsSeckillPrice | toFixed2 }}</text>
					</view>
					<view class="flex-jus f26 mt20 borderbtm pb20">
						<text>优惠券</text>
						<text class="cff7" v-if="sel_Coupon.id">-￥{{coupon_amount}}</text>
						<text class="cff7" v-else>-￥0</text>
					</view>
					<view class="flex-jus f28 fw500 mt20">
						<text class="">实付</text>
						<text v-if="sel_Coupon.id">￥{{total_amount}}</text>
						<text v-else>￥{{totalPrice}}</text>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- //优惠券 -->
		<u-popup :show="show_yhq" @close="closeshowyhq" @open="show_yhq = true" closeable round="20">
			<view class="p30">
				<view class="f28 c343 bold">优惠</view>
				<view class="f24 c999">可使用优惠券</view>
				<u-gap height="20"></u-gap>
				<view class="pop-scroll-box">
					<view class="yhq-item pore p30 mb20" v-for="(item,index) in couponList" :key="item.id"
						@click="chooseCoupon(index)">
						<view class="flex" v-if="item.conpType == 1">
							<view class="mr30 textC">
								<view class="cyellow">
									<text class="f24">￥</text>
									<text class="f40 bold">{{item.conpTextObject.deductionAmount}}</text>
								</view>
								<view class="cyellow f24">满{{item.conpTextObject.fullAmount}}可用</view>
							</view>
							<u-line length="100rpx" color="#eee" direction="col"></u-line>
							<view class="ml30">
								<view class="c343 bold f28 mb10">{{item.coupTitle}}</view>
								<view class="f24" v-if="item.lifespanType == 1">{{item.lifespanTextObject.startTime}} ~
									{{item.lifespanTextObject.endTime}}
								</view>
								<view class="f24" v-if="item.lifespanType == 2">
									有效期：{{item.lifespanTextObject.lifespan}}天</view>
							</view>
						</view>
						<view class="flex" v-if="item.conpType == 2">
							<view class="mr30">
								<view class="cyellow textC">
									<!-- <text class="f24">￥</text> -->
									<text class="f40 bold">{{item.conpTextObject.discount}}折</text>
								</view>
								<view class="cyellow f24">最高减{{item.conpTextObject.maxReduction}}元</view>
							</view>
							<u-line length="100rpx" color="#eee" direction="col"></u-line>
							<view class="ml30">
								<view class="c343 bold f28 mb10">{{item.coupTitle}}</view>
								<view class="f24" v-if="item.lifespanType == 1">{{item.lifespanTextObject.startTime}} ~
									{{item.lifespanTextObject.endTime}}
								</view>
								<view class="f24" v-if="item.lifespanType == 2">
									有效期：{{item.lifespanTextObject.lifespan}}天</view>
							</view>
						</view>
						<view class="flex" v-if="item.conpType == 3">
							<view class="mr30">
								<view class="cyellow">
									<text class="f32 bold">无门槛</text>
								</view>
								<view class="f24" :class="item.useStauts > 0?'c999':'cyellow'">
									满0可用</view>
							</view>
							<u-line length="100rpx" color="#eee" direction="col"></u-line>
							<view class="ml30">
								<view class="c343 bold f28 mb10">{{item.coupTitle}}</view>
								<view class="f24" v-if="item.lifespanType == 1">{{item.lifespanTextObject.startTime}} ~
									{{item.lifespanTextObject.endTime}}
								</view>
								<view class="f24" v-if="item.lifespanType == 2">
									有效期：{{item.lifespanTextObject.lifespan}}天</view>
							</view>
						</view>
						<u-gap height="30"></u-gap>
						<view class="f24 c343">
							{{item.range == 1?'全团购业务':'指定团购业务'}}
						</view>
						<image src="https://hxs.dsjhs.com:553/prod-api/profile/yhq.png" mode="" class="yhq_bg"></image>
						<view class="yhq_check" v-show="couponIndex == index">
							<u-icon size="20" name="checkmark-circle-fill" color="#FFDE6D"></u-icon>
						</view>
					</view>
				</view>
				<u-gap height="10"></u-gap>
				<view>
					<u-button color="#21B9AD" :customStyle="{'color':'#fff','height':'90rpx'}" shape="circle"
						@click="selBtn('','coupon')">确认选择</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getGoodsInfo,
		getRoomDate
	} from '@/common/api_tuangou.js'
	import {
		getCanuseCoupon,
	} from '@/common/api_user.js'
	import {
		createOrder,
		payOrder,
		getOrderamount
	} from '@/common/api_order.js'
	import utils from '@/common/utils.js'
	import datePicker from '@/components/date-picker/date-picker.vue'
	
	export default {
		components: {
			datePicker
		},
		data() {
			return {
				show_fees: false,
				show_xvzhi: false,
				show_yhq: false,
				checked: [],
				buyNum: 1,
				detail: {
					goodsStores: []
				},
				longitude: 30.205922,
				latitude: 115.082256,
				id: '',
				couponList: [],
				couponIndex: 0,
				sel_Coupon: {},
				total_amount: '0.00',
				coupon_amount: 0,
				model1: {
					dueName: '',
					duePhone: ''
				},
				daysCount: 76,
				roomDateList: [],
				checkinDate: [],
				checkinArr: [],
				paramsRoomData: {},
				rules: {
					'dueName': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'duePhone': {
						type: 'string',
						required: true,
						message: '请填写手机号',
						trigger: ['blur', 'change']
					},
				}
			}
		},
		onLoad(option) {
			console.log(option, 'optionssss')
			this.id = option.id
			this.model1.dueName = this.userInfo.userNick
			this.model1.duePhone = this.userInfo.userPhone
			if (option.orderDate) {
				const orderData = decodeURIComponent(option.orderDate)
				this.paramsRoomData = JSON.parse(orderData)
				console.log(this.paramsRoomData, 'optionsss')
			}
			this.getGoodsInfo()
			
		},
		mounted() {
			
		},
		computed: {
			totalPrice() { //总计
				let num = 0
				if (this.detail.goodsSeckill) { //是否为秒杀价
					// console.log('秒杀', this.detail.goodsSeckill);
					num = this.detail.goodsSeckill.price * this.buyNum
					
				} else {
					if (this.detail.roomType === 0 || !this.detail.roomType) {
						num = this.totalSalePrice 
					} else {
						// 酒店价格
						let tempArr = this.actualHotelDays.map(item => item.act.price)
						num = this.arraySum(tempArr)
					}
				}
				console.log(num, 'ddddd')
				return num.toFixed(2)
			},
			totaloriginalPrice() { //原价总计
				let num = 0
				num = this.detail.originalPrice * this.buyNum
				return num
			},
			totalDiscountPrice() {
				// 如果有秒杀价
				// if (this.detail.goodsSeckill) {
				// 	return (this.detail.originalPrice - this.detail.goodsSeckill.price) * this.buyNum
				// }
				// console.log((this.detail.originalPrice - this.detail.salePrice), this.buyNum, '9999')
				// 酒店类型
				if (this.detail.roomType === 1) {
					console.log(this.actualHotelDays, 'this.actualHotelDays')
					let originaCount = 0
					let salePrice = 0
					this.actualHotelDays.forEach(item => {
						originaCount += item.act.originalPrice
						salePrice += item.act.price
					})
					return originaCount - salePrice
				} else {
					// // 如果有秒杀价
					// if (this.detail.goodsSeckill) {
					// 	return (this.detail.originalPrice - this.detail.goodsSeckill.price) * this.buyNum
					// } else {
					// 	return (this.detail.originalPrice - this.detail.salePrice) * this.buyNum
					// }
					return (this.detail.originalPrice - this.detail.salePrice) * this.buyNum
				}
				
			},
			// 秒杀优惠
			goodsSeckillPrice() {
				if (this.detail.goodsSeckill) {
					return (this.detail.salePrice - this.detail.goodsSeckill.price) * this.buyNum
				}
				
			},
			countUnit() {
				return this.detail.roomType === 1 ? '晚': '件'
			},
			countUnit2() {
				return this.detail.roomType === 1 ? '晚': '份'
			},
			// 现价的总价格 现价 * 件数
			totalSalePrice() {
				return this.detail.salePrice * this.buyNum
			},
			// 参考价(如果有秒杀价显示秒杀价，否则显示现价)
			referencePrice() {
				return this.detail.goodsSeckill ? this.detail.goodsSeckill.price : this.detail.salePrice
			},
			// 合并重复项
			referenceList() {
				return this.sumDuplicatePrices(this.actualHotelDays)
			},
			// 费用明细--优惠总价
			discountTotalPrice() {
				if (this.detail.goodsSeckill) {
					return Number(this.totalDiscountPrice) + Number(this.coupon_amount) + Number(this.goodsSeckillPrice)
				} else {
					return Number(this.totalDiscountPrice) + Number(this.coupon_amount)
				}
			},
			// 商品原价
			originalTotalPrice() {
				// if (this.detail.roomType === 1) {
				// 	return this.totalPrice
				// } else {
				// 	return this.detail.originalPrice * this.buyNum
				// }
				return this.detail.originalPrice * this.buyNum
			},
			// 实际入住酒店时间
			actualHotelDays() {
				return this.checkinArr.splice(0, this.checkinArr.length - 1)
			}
		},
		filters: {
			toFixed2(val) {
				return Number(val).toFixed(2)
			}
		},
		methods: {
			openshowyhq() {
				this.show_yhq = true
			},
			closeshowyhq() {
				this.show_yhq = false
			},
			sumDuplicatePrices(items) {
				console.log(items, 'items')
			  let priceCount = {};
			  items.forEach(item => {
				item.count = 1
			    if (priceCount[item.act.originalPrice]) {
			      priceCount[item.act.originalPrice].count += item.count;
			    } else {
			      priceCount[item.act.originalPrice] = { originalPrice: item.act.originalPrice, count: item.count };
			    }
			  });
			  return Object.values(priceCount);
			},
			 
			// 使用示例
			// let items = [
			//   { price: 100, count: 2 },
			//   { price: 150, count: 1 },
			//   { price: 100, count: 3 },
			//   { price: 150, count: 2 },
			// ];
			// let result = sumDuplicatePrices(items);
			// console.log(result); // [{ price: 100, count: 5 }, { price: 150, count: 3 }]
			async getCanuseCoupon() { //获取可用优惠券
				uni.showLoading({
					mask: true
				})
				const res = await getCanuseCoupon({
					type: 2,
					proId: this.id,
					price: this.totalPrice
				})
				if (res.code == 200) {
					this.couponList = res.data || []
					console.log(this.couponList);
					if (this.couponList.length > 0) {
						this.sel_Coupon = this.couponList[0]
						this.getOrderamount()
					}
				}
				uni.hideLoading()
			},
			chooseCoupon(index) {
				if (this.couponIndex == index) {
					this.couponIndex = -1
					return false
				}
				this.couponIndex = index
			},
			selBtn(item, type) {
				switch (type) {
					case 'coupon':
						if (this.couponIndex == -1) {
							this.sel_Coupon = {}
						} else {
							this.sel_Coupon = this.couponList[this.couponIndex]
							this.getOrderamount()
						}
						
						this.show_yhq = false
						break;
				}
			},
			async getOrderamount() { //计算总价
				uni.showLoading({
					mask: true
				})
				const res = await getOrderamount({
					id: this.sel_Coupon.id || '',
					price: this.totalPrice
				})
				if (res.code == 200) {
					this.total_amount = res.data.orderPrice
					this.coupon_amount = res.data.discountPrice
				}
				uni.hideLoading()
			},
			toSureorder() {
				if (this.detail.isDue === 1 && (!this.model1.dueName || !this.model1.duePhone)) {
					uni.showToast({
						title: '请完善预定人信息',
						icon: 'none'
					})
				}
				if (this.detail.isDue === 1) {
					this.$refs.uForm.validate().then(async (result) => {
						this.createOrders()
					})
				} else {
					this.createOrders()
				}
				
			},
			async createOrders() {
				let res = await createOrder({
					proId: this.detail.id,
					orderPrice: this.total_amount > 0 ? this.total_amount : this.totalPrice,
					discountPrice: this.coupon_amount,
					coupId: this.sel_Coupon.id || '',
					payMethod: 1,
					orderType: 3,
					orderDetails: [{
						wareId: this.detail.id,
						buyCount: this.buyNum,
						price: this.detail.salePrice,
						startDate: this.checkinDate[0],
						endDate: this.checkinDate[1]
					}],
					timePeriod: this.checkinDate.join('-'),
					dueName: this.model1.dueName,
					duePhone: this.model1.duePhone
				})
				if (res.code == 200) {
					this.payOrder(res.data.id)
				}
			},
			async payOrder(order_id) {
				uni.showLoading({
					mask: true,
					title: '正在支付中...'
				})
				const res = await payOrder({
					id: order_id
				})
				if (res.code == 200) {
					let config = res.data
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: config.timeStamp.toString(),
						nonceStr: config.nonceStr,
						package: 'prepay_id=' + config.package.prepay_id,
						signType: config.signType,
						paySign: config.paySign,
						success() {
							uni.hideLoading()
							uni.showToast({
								title: '支付成功',
								icon: 'success',
								success() {
									uni.redirectTo({
										url: '/groupPurchase/order/buysuccess?id=' + order_id
									})
								}
							})
						},
						fail(err) {
							console.log(222, err);
							uni.hideLoading()
							uni.showToast({
								title: '支付取消',
								icon: 'error'
							})
							setTimeout(() => {
								uni.redirectTo({
									url: '/subpage/order/tuangouDetail?id=' + order_id
								})
							}, 500)
						}
					})
				}
				uni.hideLoading()

			},
			async getGoodsInfo() {
				let res = await getGoodsInfo({
					id: this.id,
					longitude: this.longitude,
					latitude: this.latitude
				})
				this.detail = res.data
				const {
					goodImages,
					goodEmployValues,
					goodsStores
				} = this.detail
				this.img = goodImages.split(',')[0]
				this.detail.employVal = goodEmployValues.split(',')
				this.detail.oneStore = goodsStores[0]
				this.getCanuseCoupon()
				
				if (res.data.roomType === 1) {
					const tempArr = JSON.parse(uni.getStorageSync('roomDateList'))
					if (tempArr?.length && res.data.roomType === 1) {
						this.roomDateList = tempArr
						this.$nextTick(() => {
							this.$refs.datePickerWrap.dateData(tempArr);
						})
					} else {
						this.getRoomDate()
					}
				} 
				
			},
			async getRoomDate() {
				let endDate = this.getLastDayOfMonthAfterDays(this.daysCount)
				console.log(endDate, 'endDate')
				const res = await getRoomDate({
					goodsId: this.id,
					endDate
				})
				if (res.code === 200) {
					this.roomDateList = res.data || []
				}
				console.log(res, 'resssss')
			},
			reduceBtn() {
				if (this.buyNum > 1) {
					this.buyNum -= 1
					if(this.couponList.length) {
						this.getOrderamount()
					}
				} else {
					uni.showToast({
						title: '购买数量不得少于1份',
						icon: 'none'
					})
				}
			},
			addBtn() {
				if (this.buyNum < this.detail.quota) {
					this.buyNum += 1
					if(this.couponList.length) {
						this.getOrderamount()
					}
				} else if (this.detail.quota == null) {
					this.buyNum += 1
					if(this.couponList.length) {
						this.getOrderamount()
					}
				} else {
					uni.showToast({
						title: "购买数量不能大于商品限购数量",
						icon: 'none'
					})
				}

			},
			showDetail() {
				console.log(123)
				this.show_fees = true
			},
			closeshowfess() {
				this.show_fees = false
			},
			open_xvzhi() {
				this.show_xvzhi = true
			},
			close_xvzhi() {
				this.show_xvzhi = false
			},
			// 入住日期
			handleChangeCheckInDate(data) {
				if (data.choiceDate.length) {
					this.checkinDate = [data.choiceDate[0].re, data.choiceDate[1].re]
					this.checkinArr = data.choiceDateArr
					this.buyNum = data.dayCount
					this.couponList.length && this.getOrderamount()
				}
				
				console.log(data, this.checkinArr, 'handleChangeCheckInDate')
			},
			// 获取某天后的那个月的最后一天日期
			getLastDayOfMonthAfterDays(days) {
			  const date = new Date(); // 当前日期
			  date.setDate(1); // 设置为当前月的第一天
			  date.setMonth(date.getMonth() + Math.ceil(days / 30)); // 增加月份
			  date.setDate(0); // 设置为当前月的最后一天
			  return this.formatDate(date); // 返回计算后的日期
			},
			formatDate(date) {
			  const yyyy = date.getFullYear();
			  const mm = this.padZero(date.getMonth() + 1);
			  const dd = this.padZero(date.getDate());
			  return `${yyyy}-${mm}-${dd}`;
			},
			padZero(value) {
			  return value < 10 ? `0${value}` : value;
			},
			arraySum(arr) {
			  return arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
			}
		},
		
	}
</script>

<style lang="scss">
	.heidian::before {
		content: "";
		background-color: black;
		border-radius: 50%;
		display: inline-block;
		line-height: 4px;
		height: 4px;
		width: 4px;
		margin-right: 5px;
		position: relative;
		bottom: 2px;
	}

	.heidian:first-of-type::before {
		opacity: 0;
		width: 0;
		height: 0;
		margin-right: 0;
	}

	.yhq_bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.yhq_check {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
	}

	.pop-scroll-box {
		height: 700rpx;
		overflow-y: scroll;
	}

	.shopdetail {
		width: 688rpx;
		min-height: 360rpx;
		background: #FFFFFF;
		border-radius: 38rpx;
		padding: 30rpx;
		box-sizing: border-box;
		margin: 20rpx auto;
	}

	.buyNumber {
		width: 688rpx;
		height: 131rpx;
		background: #FFFFFF;
		border-radius: 38rpx;
		padding: 30rpx;
		box-sizing: border-box;
		margin: 20rpx auto;
	}

	.youhui {
		width: 688rpx;
		// height: 310rpx;
		background: #FFFFFF;
		border-radius: 38rpx;
		padding: 30rpx;
		box-sizing: border-box;
		margin: 20rpx auto;
	}

	.yonghuxvzhi {
		width: 100%;
		background: #FFFFFF;
		border-radius: 38rpx 38rpx 0 0;
		height: 150rpx;
		padding: 30rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 135rpx;
		z-index: 99;
	}

	.bottomfixed {
		height: 165rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -6rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 38rpx 38rpx 0rpx 0rpx;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;

		.buyBtn {
			width: 227rpx;
			height: 92rpx;
			background: #FFDE6D;
			border-radius: 38rpx;
			backdrop-filter: blur(25px);
		}

		.oldprice {
			width: 65rpx;
			height: 31rpx;
			font-weight: 400;
			font-size: 27rpx;
			color: #ddd;
			line-height: 31rpx;
			text-align: left;
			font-style: normal;
			text-decoration: line-through
		}
	}

	.contentbox {
		width: 688rpx;
		height: 452rpx;
		background: #FFFFFF;
		border-radius: 38rpx;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.goumaixvzhi {
		width: 688rpx;
		min-height: 300rpx;
		background: #FFFFFF;
		border-radius: 38rpx;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.userinfo_box {
		width: 688rpx;
		background: #FFFFFF;
		border-radius: 38rpx;
		padding: 30rpx;
		box-sizing: border-box;
		margin: 0 auto;
		margin-bottom: 400rpx;
	}
	.fee-item {
		display: block;
	}
</style>